<template>
  <div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-semibold text-gray-800">正在计算的任务列表</h3>
      <div class="flex space-x-2">
        <a-input-search v-model="searchValue"
                        placeholder="搜索任务名称"
                        size="small"
                        @search="handleSearch"
                        style="width: 200px" />
        <a-button type="primary"
                  size="small">
          <Icon type="plus" /> 新建任务
        </a-button>
      </div>
    </div>
    <div class="overflow-x-auto">
      <a-table :columns="columns"
               :data-source="filteredTaskList"
               :pagination="false"
               row-key="id">
        <template #title>
          <div class="flex justify-between items-center">
            <span>共 {{ tasks.length }} 个正在运行的任务</span>
            <div class="text-sm text-gray-500">
              <a-button type="link"
                        size="small">
                <Icon type="reload" /> 刷新
              </a-button>
            </div>
          </div>
        </template>
        <template #status="{ record }">
          <span :class="getStatusClass(record.status)">
            <Icon :type="getStatusIcon(record.status)" />
            {{ record.status }}
          </span>
        </template>
        <template #progress="{ record }">
          <div class="flex items-center">
            <a-progress :percent="record.progress"
                        :status="getProgressStatus(record.progress)"
                        size="small"
                        style="width: 120px" />
            <span class="ml-2 text-sm">{{ record.progress }}%</span>
          </div>
        </template>
        <template #actions="{ record }">
          <div class="flex space-x-2">
            <a-button type="link"
                      size="small"
                      @click="handleViewTask(record.id)">
              <Icon type="eye" /> 查看
            </a-button>
            <a-button type="link"
                      size="small"
                      @click="handlePauseTask(record.id)">
              <Icon type="pause" /> 暂停
            </a-button>
            <a-button type="link"
                      size="small"
                      @click="handleStopTask(record.id)"
                      danger>
              <Icon type="stop" /> 终止
            </a-button>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, computed } from 'vue';

const props = defineProps({
  tasks: { type: Array, required: true },
  searchText: { type: String, default: '' },
});

const emits = defineEmits(['search', 'viewTask', 'pauseTask', 'stopTask']);

const searchValue = props.searchText;

const filteredTaskList = computed(() => {
  if (!searchValue) return props.tasks;
  return props.tasks.filter(
    (task) => task.name.toLowerCase().includes(searchValue.toLowerCase()) || task.algorithm.toLowerCase().includes(searchValue.toLowerCase())
  );
});

const columns = [
  { title: '任务名称', dataIndex: 'name', key: 'name', width: 200 },
  { title: '算法', dataIndex: 'algorithm', key: 'algorithm', width: 120 },
  { title: '开始时间', dataIndex: 'startTime', key: 'startTime', width: 150 },
  { title: '预计耗时', dataIndex: 'estimatedTime', key: 'estimatedTime', width: 120 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 100, slots: { customRender: 'status' } },
  { title: '进度', dataIndex: 'progress', key: 'progress', width: 150, slots: { customRender: 'progress' } },
  { title: '资源占用', dataIndex: 'resources', key: 'resources', width: 180 },
  { title: '操作', key: 'action', width: 150, slots: { customRender: 'actions' } },
];

const getStatusClass = (status: string) => {
  switch (status) {
    case '进行中':
      return 'text-blue-500';
    case '待验证':
      return 'text-orange-500';
    case '即将完成':
      return 'text-green-500';
    default:
      return 'text-gray-500';
  }
};

const getStatusIcon = (status: string) => {
  switch (status) {
    case '进行中':
      return 'loading';
    case '待验证':
      return 'exclamation-circle';
    case '即将完成':
      return 'check-circle';
    default:
      return 'question-circle';
  }
};

const getProgressStatus = (progress: number) => {
  if (progress >= 90) return 'success';
  if (progress >= 50) return 'active';
  return 'normal';
};

const handleSearch = (value: string) => {
  emits('search', value);
};

const handleViewTask = (id: number) => {
  emits('viewTask', id);
};

const handlePauseTask = (id: number) => {
  emits('pauseTask', id);
};

const handleStopTask = (id: number) => {
  emits('stopTask', id);
};
</script>